<script setup>
const props = defineProps({
  text: {
    type: String,
    default: '按钮'
  },
  borderRadius: {
    type: String,
    default: 'lg'
  },
  fontColor: {
    type: String,
    default: 'white' // Tailwind text color (e.g., text-white)
  },
  fontSize: {
    type: String,
    default: 'base' // Tailwind font size (e.g., text-base)
  },
  paddingX: {
    type: String,
    default: '5' // Tailwind padding-x (e.g., px-5)
  },
  paddingY: {
    type: String,
    default: '3' // Tailwind padding-y (e.g., py-3)
  },
  backgroundColor: {
    type: String,
    default: 'gray-800' // Tailwind background color (e.g., bg-gray-800)
  },
  backgroundHoverColor: {
    type: String,
    default: 'gray-400'
  }
})
</script>

<template>
  <button
      :class="[
      'inline-flex justify-center items-center',
      `rounded-${props.borderRadius}`,
      `text-${props.fontColor}`,
      `text-${props.fontSize}`,
      `px-${props.paddingX}`,
      `py-${props.paddingY}`,
      `bg-${props.backgroundColor}`,
      `hover:bg-${props.backgroundHoverColor}`,
      'font-medium text-center focus:ring-4 focus:ring-primary-300 dark:focus:ring-primary-900 cursor-pointer'
    ]"
      v-bind="$attrs"
  >
    <slot>{{ props.text }}</slot>
  </button>
</template>
